@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')

    <div class="mui-content mui-scroll-wrapper" id="pullrefresh" style="background: transparent;">
        <div class=" mui-scroll" style="background-color: #f5f5f5;min-height: 100%;">
            <div class="mui-table-view mui-table-view-chevron mui-bottom">
                <div class="mui-fenlei-li" style="background: #4987fe;">
                    <ul class="mui-list-unstyled mui-clearfix">

                        <li style="width: 33.33%;border-right: 1px solid #DDDDDD">
                            <a style="text-align: center" href="{{route('f_Wap_message_index',['type'=>'inbox'])}}"
                               class="@if('inbox' == ($type ?? 1)) mui-text-bai @endif">收件箱
                            </a>
                        </li>

                        <li style="width: 33.33%;border-right: 1px solid #DDDDDD">
                            <a style="text-align: center" href="{{route('f_Wap_message_index',['type'=>'outbox'])}}"
                               class="@if('outbox' == ($type ?? 1)) mui-text-bai @endif">发件箱
                            </a>
                        </li>

                        <li style="width: 33.33%;border-right: 1px solid #DDDDDD">
                            <a style="text-align: center" href="{{route('f_Wap_message-addMsg',['type'=>'add'])}}"
                               class="@if('add' == ($type ?? 1)) mui-text-bai @endif">发消息
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="mui-queren-dingdan ">
                    <form action="{{route('f_Wap_message-send')}}" method="post" class="mui-table-view mui-table-view-chevron mui-bottom mui-user-xx" id="xianxia">

                        <div class="input1">
                            <select name="to_user_id">
                                <option value="0">后台管理员</option>
                            </select>
                            <input id="user"   type="hidden" name="uid" value="0">
                            <input type="text" name="title" id="messageTitle" placeholder="请输入标题">
                            <textarea placeholder="留言内容" id="messageContent" name="content"
                                      style="border: none;font-size: 14px;color: inherit;"></textarea>
                        </div>


                        <div class="mui-user-xx-header bg-fff">
                            <div style="margin-bottom: 10px;">上传图片</div>
                            <a href="javascript:;">

                                <img src="{{asset(config('view.frontend.wap_login').'/images/tu43.png')}}" width="45" id="preview" />

                                <input type="hidden" name="msg_img" id="msg_img" value="" />

                            </a>
                            <input type="file" class="mui-sc-pz" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)"  />

                        </div>

                        {{csrf_field()}}
                        <div class="btn">
                            <button type="button">立即发送</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar')
@endsection
@push('scripts')
<script type="text/javascript">

    function imgPreview(fileDom) {

        //判断是否支持FileReader
        if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if(!imageType.test(file.type)) {
            mui.alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
            var load =  layer.open({type: 2});
            $.ajax({
                type: 'post',
                url: '{{route('f_Upload_uploadBase64')}}',
                dataType: 'json',
                data: {
                    imgField:'msg_img',
                    msg_img: e.target.result,
                    group:'message',
                    _token:'{{csrf_token()}}'
                }
            }).done(function (response) {
                if(response.status){
                    $('#msg_img').val(response.data.url);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast(XMLHttpRequest.responseJSON.msg);
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {
                layer.close(load);
            });
        };
        reader.readAsDataURL(file);
    }


    $(function () {
        $("select[name='to_user_id']").change(function () {
            var author = $("select[name='to_user_id']").val()
            if (author == "1") {
                $("#author").removeClass("hide")
            } else {
                $("#author").addClass("hide")
            }
        })
    })

    $('.btn>button').click(function () {
        var form = $(this).parents('form');
        var content = $(this).parents('form').find('#messageContent').val();
        var title = $(this).parents('form').find('#messageTitle').val();

        if ($('#messageTitle').val().length > 20) {
            mui.toast('标题不能超过20个字符');
            return false;
        }
        if ($('#messageContent').val().length > 200) {

            mui.toast('内容不能超过200个字符');
            return false;
        }
        if (title && content) {
            $.ajax({
                type: 'post',
                url: $(form).attr('action'),
                dataType: 'json',
                data: $(form).serialize()
            }).done(function (response) {
                if (response.status) {
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                } else {
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    mui.toast(XMLHttpRequest.responseJSON.msg);
                } else {
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        } else {
            mui.toast('请检查标题和内容是否符合要求，且不能为空');
        }
    })

</script>
@endpush
